<!DOCTYPE HTML>
<html lang="en" xml:lang="en">
<head>
<title>5th task</title>
<meta charset="UTF-8" />
<style type="text/css">
	tr, td {padding:5px;}
	
	.label 
	{
		text-align: right;
		font-weight: bold;
		font-size: 14px;
	}
	.footer
	{	background-color: #b1ebeb;
		text-align: center;
	}
	
</style>
</head>

<body>
	<form method="get">
		
		<table border="1"> 
		<colgroup>
			<col style="width:160px">
			
		</colgroup>	
			<tr><td class="label"><label for="lastname">Last name</label></td><td colspan="3"><input type="text" id="lastname" /></td></tr>
			<tr><td class="label"><label for="firstname">First name</label></td><td colspan="3"><input type="text" id="firstname" /></td></tr>
			<tr>
				<td class="label"><label>Address</label></td>
				<td colspan="3"><textarea name="Address" cols="25" rows="2" placeholder="Enter your address here..."></textarea></td>
			</tr>
			<tr>
				<td class="label"><label for="city">City</label></td>
				<td><input type="text" id="city"/></td>
				<td><label class="label" for="state">State</label></td>
				<td><input type="text" id="state"/></td> 
			</tr>
			<tr>
				<td class="label"><label for="zip">Zip/Postal code</label></td><td colspan="3"><input type="text" id="zip" /></td>
			</tr>
			<tr>
				<td class="label"><label for="country">Country</label></td>
				<td colspan="3">
					<select>
						<option value="1" selected="selected">Bulgaria</option>
						<option value="2">Serbia</option>
						<option value="3">Romania</option>
						<option value="4">Greece</option>
						<option value="5">Turkey</option>
						<option value="6">Albania</option>
						<option value="7">Montenegro</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="label">
					<label for="country">Phone (Country code, area code, number)</label>
				</td>
				<td colspan="3">
					(+ <input type="tel" id="country" size="6" required="true" pattern="[0-9]{3}" placeholder="359" /> )
					<input type="tel" size="6" required="true" pattern="[0-9]{3}" placeholder="999" />
					<input type="tel" size="6" required="true" pattern="[0-9]{3}" placeholder="123" />
					<input type="tel" size="6" required="true" pattern="[0-9]{3}" placeholder="456" />
				</td>
			</tr>
			<tr>
				<td class="label"><label for="email">E-mail</label></td>
				<td colspan="3"><input type="email" id="email" required="true"
				    pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z0-9]{3,}.[a-zA-Z0-9]{2,4}"
					placeholder="sample@email.com" />
				</td>
			</tr>
			<tr>
				<td class="label"><label for="birth">Birth date</label></td>
				<td colspan="3">Month <input type="text" name="month" size="4" id="birth" pattern="[0-9]{2}" /> &nbsp; Day <input type="text" name="day" size="4" pattern="[0-9]{2}" /> &nbsp; Year (4 digit) <input type="text" name="year" size="4" pattern="[0-9]{4}" /> </td>
			</tr>
			<tr>
				<td class="label"><label>Gender</label></td>
				<td colspan="3">
					<select>
						<option value="1" selected="selected">Male</option>
						<option value="2">Female</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="label"><label>Starting date</label></td>
				<td colspan="3"><input type="radio" name="season" value="Spring 2012"/> Spring 2012 <input type="radio" name="season" value="Summer 2012"/> Summer 2012</td>
			</tr>
			<tr>
				<td class="label"><label>Comments/Questions</label></td>
				<td colspan="3"><textarea name="Address" cols="25" rows="3" placeholder="Enter your address here..."></textarea></td>
			</tr>
			<tr>
			<td class="footer" colspan="4"><input type="submit" value="Submit" onclick="alert('Further this form will be sent somewhere...')" /> &nbsp; <input type="reset" value="Clear this form" />  </td>
			</tr>
		</table>
	</form>
</body>
</html>